<template>
    <div class="main">
      <header>

      </header>
      <section class="content">
        <div class="contentLeft">
          <div class="myCourse">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的选课</span>
              <hr/>
            </div>
            <div>
            <ul class="courseUl" style="margin-top:2px;margin-left:6px; width:100%;">
              <li style="font-size: 12px;color: #a23d0b"><span>课程号</span><span>课程名称</span><span>任课教师</span><span>上课教室</span><span>考试时间</span><span>分数</span><span>选课时间</span></li>
              <li v-for="(sc,index) in scs" style="font-size: 11px;color: #504e4d;margin-top:6px;">
                <span>{{sc.cno}}</span><span>{{sc.course.cname}}</span><span>{{sc.cno}}</span><span>{{sc.exampoint}}</span><span v-text="dateFormat(sc.examtime,'yyyy-MM-dd HH:mm')"></span><span>{{sc.score}}</span><span v-text="dateFormat(sc.addtime,'yyyy-MM-dd HH:mm')"></span>
              </li>
            </ul>
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="currPageChangeBySc"
                :current-page.sync="pageInfo.currPage"
                :pageSize="pageInfo.pageSize"
                :total="pageInfo.itemCount">
              </el-pagination>
            </div>
          </div>
          <div class="myClassmate">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的同学</span>
              <hr/>
            </div>
            <ul class="classMateUl">
              <li v-for="(student,index) in students">
                <div class="imgDiv">
                  <img :src="getImgUrl(student.imgsrc)" style="height: 120px;">
                </div>
                <div>
                  {{student.name}}
                </div>
              </li>
            </ul>
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="currPageChangeForClassMateBySc"
              :current-page.sync="pageInfoForClassMate.currPage"
              :pageSize="pageInfoForClassMate.pageSize"
              :total="pageInfoForClassMate.itemCount">
            </el-pagination>
          </div>
          <div class="myCostRecord">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的消费</span>
              <hr/>
            </div>
            <div class="myEchart">
              <div>
               <StudentScoreBar/>
              </div>
              <div>
              <StudentScoreByPie/>
              </div>
            </div>
          </div>
        </div>
        <div class="contentRight">
          <div class="info" style="position:relative">
            <div class="photo" style="position: absolute;width:100px;height: 120px;top:10px;left:10px">
              <img :src="getImgUrl(student.imgsrc)" style="width:100px;height: 120px;">
            </div>
            <ul class="infoUl" style="position: absolute;top:10px;left:114px; width:186px;">
              <li><span>学号：</span><span>{{student.sno}}</span></li>
              <li><span>姓名：</span><span>{{student.name}}</span></li>
              <li><span>性别：</span><span>{{student.sex}}</span></li>
              <li><span>出生日期：</span><span>{{student.cnBirthDay}}</span></li>
              <li><span>入学日期：</span><span>{{student.cnJointime}}</span></li>
              <li><span>联系电话：</span><span>{{student.homephone}}</span></li>
              <li><span>籍贯：</span><span>{{student.area}}</span></li>
              <li><span>所在班级：</span><span>{{student.clazz.cname}}</span></li>
              <li><span>班主任：</span><span>{{student.clazz.teacher.tname}}</span></li>
            </ul>
          </div>
          <div class="myTeachers">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的老师</span>
              <hr/>
            </div>
          </div>
        </div>
      </section>
      <footer>

      </footer>

    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import * as fecha from "element-ui/lib/utils/date";
  import utilsFD from "../../../../static/js/utils/index.js"
  import StudentScoreBar from '../../echart/student/studentScoreBar.vue' //引入自定义图表组件
  import StudentScoreByPie from '../../echart/student/studentScoreByPie.vue'
    export default {
        name: "index",
        components:{StudentScoreBar,StudentScoreByPie},
        data(){
          return {
            student:{"clazz":{"teacher":{"tname":""},"cname":""}},
            currPage:1,
            scs:{},
            pageInfo:{"pageSize":3,"currPage":1},
            students:{},
            pageInfoForClassMate:{"pageSize":12,"currPage":1},
                name:'张雪',
                xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
                yData: [30, 132, 80, 134],


          }
        },
      methods:{
        //根据id查询学生信息
        getStudentBySno:function(){
          let _this = this;
          api.setDataFromAxios("/api/TestWeb/studentController/selectBySnoWithClazzAndTeacher/"+this.student.sno,null,"get",null).then(
            dto=>{
              console.log(dto);
              _this.student = dto.t;
              if( this.student.area!=null&&this.student.area!='') {
                this.selectedOptions = this.student.area.split(",")[1];
              }
              //处理图片字段的地址 变成对应的file 对象 el-upload才能匹配显示
              if(this.student.imgsrc!=null&&this.student.imgsrc!=''){
                this.oldImg = true;
                let urls = this.student.imgsrc.split(",");
              }
              this.student.cnBirthDay = utilsFD.FD.Fd().dateFormatCN(this.student.birthday,'yyyy-MM-dd',fecha);
              this.student.cnJointime = utilsFD.FD.Fd().dateFormatCN(this.student.jointime,'yyyy-MM-dd',fecha);
              this.getClassMateByCno();
            }
          )
        },
        //根据id查询学生选课信息
        getScBySnoAndByPage:function(){
          let _this = this;
          api.setDataFromAxios("/api/TestWeb/studentController/getScBySnoAndByPage/",{"pageSize":this.pageInfo.pageSize,"currPage":this.pageInfo.currPage,"conditions":{"sno":"09010101"}},"post",null).then(
            dto=>{
              console.log(dto);
              _this.scs = dto.tList;
              this.pageInfo = dto.obj;//没有赋值导致分页标签没有页码 没有结束
            }
          )
        },
        //查询同班同学
        getClassMateByCno:function(){
          let _this = this;
          api.setDataFromAxios("/api/TestWeb/studentController/getClassMateByCnoAndByPage",{"currPage":this.pageInfoForClassMate.currPage,"pageSize":this.pageInfoForClassMate.pageSize,"conditions":{"sno":this.student.sno,"cno":this.student.cno}},"post",null).then(
            dto=>{
              console.log(dto);
              _this.students = dto.tList;
              _this.pageInfoForClassMate = dto.obj;

            }
          )
        },
        getImgUrl: function (imgsrc) {
          //idea edit configuration deployement add external source
          return "/api/upload/head/" + imgsrc;
        },
        currPageChangeBySc:function () {
          this.getScBySnoAndByPage();//当用户选择页码，选中的页码自动同步给currPage，再调用重新分页查询当前页方法
        },
        currPageChangeForClassMateBySc:function () {
          this.getClassMateByCno();
        },
        dateFormat(cellValue,pattern) {
          return utilsFD.FD.Fd().dateFormatCN(cellValue,pattern,fecha);
        },
      },
      created() {
            this.student = this.$route.params.student;
         // this.student.sno = '09010101';
          this.getStudentBySno();
          this.getScBySnoAndByPage();
      },
      mounted () {
        const {name,xData,yData} = this
        console.log(this.$refs)
        this.$refs.chart_line_one.initChart(name,xData,yData)
      },
    }
</script>

<style scoped lang="stylus">
  div
    border solid 0px;
 .main
   font-family "微软雅黑"
   width 1000px;
   height auto;
   margin 0 auto;
   header
     height 40px;
   .content
     width 1004px;
     height 100%
     div
       float left;
     .frontTitle
        margin 0;
        color: white
        font-size 12px;
        height 24px;
        text-align left;
        span
          text-align center;
          vertical-align center;
          background-color #009af3
          display inline-block;
          width 70px;
          height 18px;
          margin 2px 0 2px 6px;
          border-radius 4px 4px 0 0;
        hr
          border-top 0;
          border-bottom solid 1px  #009af3;
          margin 0 0 0 6px;
          position absolute;
          bottom 3px;
          width 90%


     .contentLeft
       width 690px;
       height 660px;
       div
         margin-top 6px;
         width 100%
       .myCourse
          height 240px;
          .courseUl
            padding-left 40px;
            li
             list-style-type none
             text-align left
             span
               display inline-block
               text-align center
               &:nth-child(1)
                  width 50px;
               &:nth-child(2)
                 width 80px;
               &:nth-child(3)
                 width 60px;
               &:nth-child(4)
                 width 80px;
               &:nth-child(5)
                 width 120px;
               &:nth-child(6)
                 width 40px;
               &:nth-child(7)
                 width 120px;
       .myClassmate
          height 360px;
          .classMateUl
             width 90%
             margin 0
             padding 0
             li
               font-size 12px;
               width 79px;
               list-style-type none
               margin-left 21px;
               float left
               .imgDiv
                 width 79px;
                 img
                   width 79px;
       .myEchart
         div
           position relative
           width 50%
           height 230px
             &:after
                clear both
                content ''
                display block
       .myCostRecord
          height 320px;

     .contentRight
       margin-left 10px
       width 300px;
       height 300px;
       div
         width 100%
       .info
         height 258px
         .photo
           width
         .infoUl
            margin 0
            padding 0
            li
              font-size 12px
              list-style-type none
              text-align left
              padding-left 4px
              span
                display inline-block
                height 26px
                &:nth-child(1)
                   width 80px
       .myTeachers
         height  auto
   footer
     height 80px;
</style>
